<!DOCTYPE html>

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        * {

            margin: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #tabtop {
            line-height: 31px;
            background: url("/admin/templates/images/map_top_bg.png") repeat;
            font-size: 12px;
            color: #343434;
        }

        #tabtop span {
            float: left;
            line-height: 31px;
            display: block;
        }

        #tabtop span.dob {
            padding-left: 7px;
        }

        #tabtop span.dob a {
            background: url("/admin/templates/images/yuncheng_a.png") no-repeat left center;
        }

        #tabtop span.dob a.ok {
            color: #3a3;
        }

        #tabtop span.dob a.on {
            color: #ef4f4f;
        }

        #tabtop span a {
            padding: 0 16px 0 8px;
            color: #343434;
            text-decoration: none;
        }

        #tabtop span.bd a {
            border-right: 1px solid #ccc;
            padding: 0 12px;
        }

        .position {
            vertical-align: text-bottom;
            margin-right: 5px;
            width: 9px;
        }

        .warring {
            color: #f00;
            padding: 0 12px;
            font-weight: bold;
        }

        .warring i {
            font-style: normal;
            float: left;
        }

        #tabtop span.warring a {
            color: #f00;
            display: block;
            float: left;
        }

        #allmap {
            float: left;

        }

        #right {
            float: right;
            background: #EFEFEF;
            height: 100%;
        }

        .dataTable {

            width: 100%;
            margin: 0 0 0 0;

        }

        .dataTable td {
            text-align: left;
        }

        .dataTable .firstCell {
            padding-left: 25px;
        }

        .tdare {
            padding: 5px;
            overflow:auto;
        }

        .tdare a {
            padding: 5px;
            color: #000;
            text-decoration: none;
        }

        .tdare td {

        }

        .tdare th a, .tdare td a {
            color: #3a7cae;
        }

        .tdare th a:hover, .tdare td a:hover {
            color: #3a7cae;
        }

        .tatr2 a {
            text-decoration: none;
        }

        .tatr2 td {
            border-bottom: 1px solid #ccc;
        }
		.anchorBL{
			display: none;
		}
        .formbtn {
            background: #e2e3e5;
            border: 1px solid #ccc;
            font-weight: bold;
            height: 28px;
            width: 78px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: #666;
            cursor: pointer;
        }

        .tdare a {
            border-bottom: 1px solid #999;
            display: block;
        }
    </style>


    <script type="text/javascript">
        //<!CDATA[
        var SITE_URL = "{$site_url}";
        var REAL_SITE_URL = "{$real_site_url}";
        var REAL_BACKEND_URL = "{$real_backend_url}";
        //]]>
    </script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=kkA94xvGPjnprY92WU4yYME8"></script>
    <script type="text/javascript" src="{lib file=jquery.js}" charset="utf-8"></script>
    <title>车辆轨迹 </title>
</head>

<body class="page">

<div id="allmap"></div>



<div  id="right">
<div class="mrightTop">
	<div class="fontl">
			
			<div style=" padding-top: 6px;padding-left: 6px;" class="left">
                <input class="queryInput" type="text" id="newquery" placeholder="车牌号/司机名字" name="newquery" value="{$smarty.get.newquery}" />

            
                <input type="button" onClick="query()"  class="formbtn" value="{$lang.query}" />
			</div>
	
	</div>
	<div class="fontr">{include file=page.top.html}</div>
	<div class="clear:both;"></div>
</div>



<div class="tdare">
<table width="100%" cellspacing="0" class="dataTable" id="dataTable">
	
		<!--{foreach from=$car_monitor item=w}-->
		<tr style="color: #3a7cae;" class="tatr2">
		 	<td> <a href="javascript:void(0);" onclick="carselected('{$w.lng}','{$w.lat}')" {if $w.lng==''||$w.lat=='' } style="color: #ccc"{/if}>{$w.a_vhc_code|escape}{if $w.a_vhc_code&&$w.a_username}  /  {/if}{$w.a_username|escape} </a></td>
		</tr>
		<!--{foreachelse}-->
		<tr class="no_data">
			<td colspan="7">{$lang.no_data}</td>
		</tr>
		<!--{/foreach}-->
	</table>

</div>
</div>

<div id="hh" onclick="hide()" style="float: right;width: 55px;font-size: 14px;color:#3a7cae;">隐藏>></div>

</body>
</html>

<script type="text/javascript">

// 百度地图API功能
//alert('<?php //echo $_GET['id'] ?>//');

PI = 3.14159265358979324;
x_pi = 3.14159265358979324 * 3000.0 / 180.0;

function transformLat(x, y){
	  var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
    return ret;
}

function transformLon(x, y){
	var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
  ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
  return ret;
}

function delta(lat, lon){
	    var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
  var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
  var dLat = this.transformLat(lon - 105.0, lat - 35.0);
  var dLon = this.transformLon(lon - 105.0, lat - 35.0);
  var radLat = lat / 180.0 * this.PI;
  var magic = Math.sin(radLat);
  magic = 1 - ee * magic * magic;
  var sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
  return {'lat': parseFloat(lat) + parseFloat(dLat), 'lon': parseFloat(lon) + parseFloat(dLon)};
}

var EARTH_RADIUS = 6378137.0; //单位M
var PI = Math.PI;

function getRad(d){
  return d*PI/180.0;
}

function bd_encrypt(gcjLon,gcjLat){
	 var x = gcjLon, y = gcjLat;  
     var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);  
     var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);  
     bdLon = z * Math.cos(theta) + 0.0065;  
     bdLat = z * Math.sin(theta) + 0.006; 
     return {'lat' : bdLat,'lon' : bdLon};
}

function gpstobd(Lng,Lat){
	var a =delta(Lat,Lng);
	return bd_encrypt(a.lon,a.lat);
}


var map = new BMap.Map("allmap");
var level = 15;
map.addEventListener("zoomend", function(){
    level=map.getZoom();
});

map.enableScrollWheelZoom();
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上角，添加比例尺
map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件


    //车辆标志
    var vmapcar = null;
    var vexception = [];
    var newindex;

    var data={$car};
    var edata;
    $.each(data, function(idx, obj) {
    if(obj.lng!=null&&obj.lng!=""){
    	var l =gpstobd(obj.lng,obj.lat);
    	obj.lng=l.lon;
    	obj.lat=l.lat;
    }
	var ptend = new BMap.Point(obj.lng, obj.lat);
	edata=obj;
	var vmapcar = new BMap.Marker(ptend, {icon: new BMap.Icon(SITE_URL + "/data/mapimage/car.png", new BMap.Size(34,73)),rotation:obj.gps_direction});  // 创建标注
    map.addOverlay(vmapcar);              // 将标注添加到地图中
    

	   //map.centerAndZoom(new BMap.Point(obj.lng, obj.lat), level);
	
	    var ptstart = new BMap.Point(obj.lng, obj.lat);
	 
	    var vmapstartlabel = new BMap.Label(obj.a_vhc_code + ' ' + obj.a_username + ' 速度' + obj.speed + '<br>时间' + obj.time, {
            offset: new BMap.Size(-80, -50),
            position: new BMap.Point(obj.lng, obj.lat)
        });
        vmapstartlabel.setStyle({
            color: "white",
            fontSize: "12px",
            fontWeight: "bold",
            border: "0px",
            backgroundColor: "#458B74"
        });
        map.addOverlay(vmapstartlabel);              // 将标注添加到地图中

	});
    setTimeout(function(){
    	map.centerAndZoom(new BMap.Point(edata.lng,edata.lat), level);
    },1000);
    
    function carselected(lng,lat) {
    	if(lng==""||lat==''){
    		return;
    	}
 	   	 if(lng!=null&&lng!=""){
 	   	    	var l =gpstobd(lng,lat);
 	   	    	lng=l.lon;
 	   	    	lat=l.lat;
 	   	 }
        var point = new BMap.Point(lng, lat);  // 创建点坐标
        map.centerAndZoom(point,level);
    }
    function query() {
		resize();
        map = new BMap.Map("allmap");
        map.enableScrollWheelZoom();
        map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上角，添加比例尺
        map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件

        //车辆标志
        var vmapcar = null;

        var vexception = [];
        var newindex;
        var data={$car};
	
	    var newquery=$("#newquery").val();
        var i=0;
		$.ajax({
			type: "post",
			url: "index.php?app=car_monitor&act=ajax_car",
			data: {newquery:newquery},
			dataType: "json",
			success: function(data){
                if(data==''){
                    $("#dataTable").children('tbody').children('tr').remove();
                    map.centerAndZoom(new BMap.Point('120.33','36.07'),level);
                }else{
                    $("#dataTable").children('tbody').children('tr').remove();
                    $.each(data, function(idx, obj) {
					
						var lng1;
						var lat1;
                    	if(obj.lng!=null&&obj.lng!=""){
							lng1=obj.lng;
							lat1=obj.lat;
                        	var l =gpstobd(obj.lng,obj.lat);
                        	obj.lng=l.lon;
                        	obj.lat=l.lat;
                        }
                    	if(obj.lng==""){
                    		 $("#dataTable").children('tbody').append('	<tr style="color: #3a7cae;" class="tatr2"><td> <a href="javascript:void(0);" onclick="carselected('+lng1+','+lat1+')" style="color:#ccc;">'+obj.a_vhc_code+'{if $w.a_vhc_code&&$w.a_username}  /  {/if}'+obj.a_username+'</a></td></tr>');
                    	}else{
                    		 $("#dataTable").children('tbody').append('	<tr style="color: #3a7cae;" class="tatr2"><td> <a href="javascript:void(0);" onclick="carselected('+lng1+','+lat1+')">'+obj.a_vhc_code+'{if $w.a_vhc_code&&$w.a_username}  /  {/if}'+obj.a_username+'</a></td></tr>');
                    	}
                       
                        var ptend = new BMap.Point(obj.lng, obj.lat);

                        var vmapcar = new BMap.Marker(ptend, {icon: new BMap.Icon(SITE_URL + "/data/mapimage/car.png", new BMap.Size(34,73)),rotation:obj.direction});  // 创建标注
                        map.addOverlay(vmapcar);              // 将标注添加到地图中
                        if(i<1){
                            map.centerAndZoom(new BMap.Point(obj.lng, obj.lat), level);
                        }
                        i++;
                        var vmapstartlabel = new BMap.Label(obj.a_vhc_code + ' ' + obj.a_username + ' 速度' + obj.speed + '<br>时间' + obj.time, {
                            offset: new BMap.Size(-80, -50),
                            position: new BMap.Point(obj.lng, obj.lat)
                        });
                        vmapstartlabel.setStyle({
                            color: "white",
                            fontSize: "12px",
                            fontWeight: "bold",
                            border: "0px",
                            backgroundColor: "#458B74"
                        });
                        map.addOverlay(vmapstartlabel);              // 将标注添加到地图中
                    });
                }

			}
		});	
}
    function winresize() {
        $("#allmap").height($(window).height() - $("#tabtop").height());
        $("#allmap").width($(window).width() - 360);
        $("#right").width(300);
        $(".tdare").height($(window).height() - $("#tabtop").height()-50);
    }
	function hide() {
		if($("#right").css("display")=="block"){
			$("#right").css("display","none");
			$("#hh").html("<<显示");
	        $("#allmap").height($(window).height() - $("#tabtop").height());
	        $("#allmap").width($(window).width() - 55);
	        
	        $(".tdare").height($(window).height() - $("#tabtop").height()-50);
		}else{
			$("#right").css("display","block");
			$("#hh").html("隐藏>>");
	        $("#allmap").height($(window).height() - $("#tabtop").height());
	        $("#allmap").width($(window).width() - 355);
	        
	        $(".tdare").height($(window).height() - $("#tabtop").height()-50);
		}
		
    }
    $(function () {
        try {
            winresize();
            $(window).resize(function () {
                winresize();
            });
        }
        catch (e) {
            console.log(e);
        }
    });
</script>

